<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>移动计算价格</title>
</head>
<body>
	<div>
		<div style="width:300px;float:left">
			<p>
				面积:
				<input type="text" id="mianji">
			</p>

			<p>
				数量:
				<input type="text" id="shuliang">
			</p>

			<p>
				面纸选择:
				<select id="mianzhi">
					<option value="白板纸">白板纸</option>
					<option value="国产牛皮纸">国产牛皮纸</option>
					<option value="进口牛卡纸">进口牛卡纸</option>
				</select>
			</p>

			<p>
				瓦楞选择:
				<select id="waleng">
					<option value ="三层箱">三层箱</option>
					<option value ="五层箱">五层箱</option>
				</select>
			</p>


			<p>
				配件选择:
				<select id="peijian">
					<option value ="有配件">有配件</option>
					<option value ="无配件">无配件</option>
				</select>
			</p>

			<p>
				工艺选择:
				<select id="gongyi">
					<option value ="有工艺">有工艺</option>
					<option value ="无工艺">无工艺</option>
				</select>
			</p>

			<p>
				显示倍数选择:
				<select id="beishu">
					<option value ="都显示">都显示</option>
					<option value ="1倍数">1倍数</option>
					<option value ="2倍数">2倍数</option>
				</select>
			</p>



			<button id="reset">重置</button>
			<button id="jisuan">计算</button>

		</div>

		<div style="font-size: 20px;width:300px;float:left" id="one">
			<p><span>1倍</span></p>
			<p>面纸:<span id="mianzhizongjia"></span></p>
			<p>瓦楞:<span id="walengzongjia"></span></p>
			<p>刀版:<span id="daobanzongjia"></span></p>
			<p>印刷:<span id="yinshuazongjia"></span></p>
			<p>覆膜:<span id="fumozongjia"></span></p>
			<p>加工:<span id="jiagongzongjia"></span></p>
			<p>配件:<span id="peijianzongjia"></span></p>
			<p>工艺:<span id="gongyizongjia"></span></p>
			<p>其它:<span>150.00</span></p>
			<p>总价:<span id="zongjia"></span></p>
		</div>

		<div style="font-size: 20px;width:300px;float:left" id="two">
			<p><span>2倍</span></p>
			<p>面纸:<span id="mianzhizongjia2"></span></p>
			<p>瓦楞:<span id="walengzongjia2"></span></p>
			<p>刀版:<span id="daobanzongjia2"></span></p>
			<p>印刷:<span id="yinshuazongjia2"></span></p>
			<p>覆膜:<span id="fumozongjia2"></span></p>
			<p>加工:<span id="jiagongzongjia2"></span></p>
			<p>配件:<span id="peijianzongjia2"></span></p>
			<p>工艺:<span id="gongyizongjia2"></span></p>
			<p>其它:<span>150.00</span></p>
			<p>总价:<span id="zongjia2"></span></p>
		</div>

	</div>
	
</body>
<script type="text/javascript">

	// 基础数据
	var mianji = document.getElementById('mianji');
	var shuliang = document.getElementById('shuliang');
	var mianzhi = document.getElementById('mianzhi');
	var waleng = document.getElementById('waleng');
	var peijian = document.getElementById('peijian');
	var gongyi = document.getElementById('gongyi');

	// 重置 计算
	var reset = document.getElementById('reset');
	var jisuan = document.getElementById('jisuan');

	// 数量倍数显示
	var beishuS = document.getElementById('beishu');
	var oneS = document.getElementById('one');
	var twoS = document.getElementById('two');

	// 1倍数量价
	var mianzhizongjia = document.getElementById('mianzhizongjia');
	var walengzongjia = document.getElementById('walengzongjia');
	var daobanzongjia = document.getElementById('daobanzongjia');
	var yinshuazongjia = document.getElementById('yinshuazongjia');
	var fumozongjia = document.getElementById('fumozongjia');
	var jiagongzongjia = document.getElementById('jiagongzongjia');
	var peijianzongjia = document.getElementById('peijianzongjia');
	var gongyizongjia = document.getElementById('gongyizongjia');
	var zongjia = document.getElementById('zongjia');

	// 2倍数量价
	var mianzhizongjia2 = document.getElementById('mianzhizongjia2');
	var walengzongjia2 = document.getElementById('walengzongjia2');
	var daobanzongjia2 = document.getElementById('daobanzongjia2');
	var yinshuazongjia2 = document.getElementById('yinshuazongjia2');
	var fumozongjia2 = document.getElementById('fumozongjia2');
	var jiagongzongjia2 = document.getElementById('jiagongzongjia2');
	var peijianzongjia2 = document.getElementById('peijianzongjia2');
	var gongyizongjia2 = document.getElementById('gongyizongjia2');
	var zongjia2 = document.getElementById('zongjia2');


	
	// 重置
	reset.onclick = function(){
		mianji.value = "";
		shuliang.value = "";
		mianzhi.value = "白板纸";
		waleng.value = "三层箱";
		beishuS.value = "都显示";
	}

	jisuan.onclick = function () {

		// 面积 数量字符串
		var mainjiS = mianji.value;
		var shuliangS = shuliang.value;

		// 字符串转number
		var mainjiV = mainjiS * 1;
		var shuliangV = shuliangS * 1;

		var mianzhiV = mianzhi.value;
		var walengV = waleng.value;
		var peijianV = peijian.value;
		var gongyiV = gongyi.value;
		var beishuV = beishuS.value;


		if(confirm("面积是:" + mainjiV + "\n数量是:" + shuliangV + "\n面纸选择:" + mianzhiV + "\n瓦楞选择:" + walengV + "\n配件选择:" + peijianV + "\n工艺选择:" + gongyiV + "\n倍数选择:" + beishuV)){

				// 计算1倍数量价格
				var totalMoney = getMoney(mainjiV,shuliangV,mianzhiV,walengV,peijianV,gongyiV)		
				// 四舍五入保留两位
				zongjiaV = totalMoney.toFixed(2);
				// 不四舍五入保留两位
				// zongjiaV = Math.floor(totalMoney * 100) / 100;
				// console.log(zongjiaV);
				zongjia.innerHTML = zongjiaV;


				// 计算2倍数量价格
				var totalMoney2 = getMoney2(mainjiV,shuliangV * 2,mianzhiV,walengV,peijianV,gongyiV)
				// 四舍五入保留两位
				zongjiaV2 = totalMoney2.toFixed(2);
				// 不四舍五入保留两位
				// zongjiaV = Math.floor(totalMoney * 100) / 100;
				// console.log(zongjiaV);
				zongjia2.innerHTML = zongjiaV2;

				// 根据显示倍数的选项值 显示价格
				if (beishuS.value == "1倍数") {
					oneS.style.display = "block";
					twoS.style.display = "none";
				}else if (beishuS.value == "2倍数") {
					oneS.style.display = "none";
					twoS.style.display = "block";
				}else if (beishuS.value == "都显示") {
					oneS.style.display = "block";
					twoS.style.display = "block";
				}else{
					// 默认全部显示
					oneS.style.display = "block";
					twoS.style.display = "block";
				}


			}
	}



	// 计算1倍数量钱
	function getMoney(mainjiV,shuliangV,mianzhiV,walengV,peijianV,gongyiV){
		var money = 0;

		// 获取面纸钱
		var mianzhiqianV = getMianZhiQian(mainjiV,shuliangV,mianzhiV);
		mianzhizongjia.innerHTML = mianzhiqianV.toFixed(2);
		// console.log(mianzhiqianV);

		// 获取瓦楞钱
		var walengqianV = getWaLengQian(mainjiV,shuliangV,walengV);
		walengzongjia.innerHTML = walengqianV.toFixed(2);
		// console.log(walengqianV);

		// 获取刀版钱
		var daobanqianV = mainjiV * 300;
		if (daobanqianV >= 150 ) {
			daobanqianV = daobanqianV;
			daobanzongjia.innerHTML = daobanqianV.toFixed(2);
		}else{
			daobanqianV = 150;
			daobanzongjia.innerHTML = daobanqianV.toFixed(2) + "(最低收费150)";
		}
		// console.log(daobanqianV);


		// 获取印刷费
		var yinshuafeiV = getYinShuaFei(shuliangV);
		yinshuazongjia.innerHTML = yinshuafeiV.toFixed(2);
		// console.log(yinshuafeiV);


		// 获取覆膜费
		var fumofeiV = 0.6 * mainjiV * (shuliangV + 100);
		if (fumofeiV >= 150 ) {
			fumofeiV = fumofeiV;
			fumozongjia.innerHTML = fumofeiV.toFixed(2);
		}else{
			fumofeiV = 150;
			fumozongjia.innerHTML = fumofeiV.toFixed(2) + "(最低收费150)";
		}


		// 获取加工费
		var jiagongfeiV = 0.6 * mainjiV * (shuliangV + 100);
		if (jiagongfeiV >= 300 ) {
			jiagongfeiV = jiagongfeiV;
			jiagongzongjia.innerHTML = jiagongfeiV.toFixed(2);
		}else{
			jiagongfeiV = 300;
			jiagongzongjia.innerHTML = jiagongfeiV.toFixed(2) + "(最低收费300)";
		}
		

		// 获取配件钱
		var peijianqianV = getPeiJianFei(shuliangV,peijianV);
		peijianzongjia.innerHTML = peijianqianV.toFixed(2);


		// 获取工艺钱
		var gongyiqianV = getGongYiFei(shuliangV,gongyiV);
		gongyizongjia.innerHTML = gongyiqianV.toFixed(2);


		money = mianzhiqianV + walengqianV + daobanqianV + yinshuafeiV + fumofeiV + jiagongfeiV + peijianqianV + gongyiqianV + 150;
		return money;
	}



	// 计算2倍数量钱
	function getMoney2(mainjiV,shuliangV2,mianzhiV,walengV,peijianV,gongyiV){
		var money2 = 0;

		// 获取面纸钱
		var mianzhiqianV2 = getMianZhiQian(mainjiV,shuliangV2,mianzhiV);
		mianzhizongjia2.innerHTML = mianzhiqianV2.toFixed(2);
		// console.log(mianzhiqianV2);

		// 获取瓦楞钱
		var walengqianV2 = getWaLengQian(mainjiV,shuliangV2,walengV);
		walengzongjia2.innerHTML = walengqianV2.toFixed(2);
		// console.log(walengqianV2);

		// 获取刀版钱
		var daobanqianV2 = mainjiV * 300 * 2;
		if (daobanqianV2 >= 150 ) {
			daobanqianV2 = daobanqianV2;
			daobanzongjia2.innerHTML = daobanqianV2.toFixed(2);
		}else{
			daobanqianV2 = 150;
			daobanzongjia2.innerHTML = daobanqianV2.toFixed(2) + "(最低收费150)";
		}
	

		// 获取印刷费
		var yinshuafeiV2 = getYinShuaFei(shuliangV2);
		yinshuazongjia2.innerHTML = yinshuafeiV2.toFixed(2);
		// console.log(yinshuafeiV2);


		// 获取覆膜费
		var fumofeiV2 = 0.6 * mainjiV * (shuliangV2 + 100);
		if (fumofeiV2 >= 150 ) {
			fumofeiV2 = fumofeiV2;
			fumozongjia2.innerHTML = fumofeiV2.toFixed(2);
		}else{
			fumofeiV2 = 150;
			fumozongjia2.innerHTML = fumofeiV2.toFixed(2) + "(最低收费150)";
		}


		// 获取加工费
		var jiagongfeiV2 = 0.6 * mainjiV * (shuliangV2 + 100);
		if (jiagongfeiV2 >= 300 ) {
			jiagongfeiV2 = jiagongfeiV2;
			jiagongzongjia2.innerHTML = jiagongfeiV2.toFixed(2);
		}else{
			jiagongfeiV2 = 300;
			jiagongzongjia2.innerHTML = jiagongfeiV2.toFixed(2) + "(最低收费300)";
		}
		

		// 获取配件钱
		var peijianqianV2 = getPeiJianFei(shuliangV2 / 2,peijianV);
		peijianzongjia2.innerHTML = peijianqianV2.toFixed(2);


		// 获取工艺钱
		var gongyiqianV2 = getGongYiFei(shuliangV2 / 2,gongyiV);
		gongyizongjia2.innerHTML = gongyiqianV2.toFixed(2);


		money2 = mianzhiqianV2 + walengqianV2 + daobanqianV2 + yinshuafeiV2 + fumofeiV2 + jiagongfeiV2 + peijianqianV2 + gongyiqianV2 + 150;
		return money2;
	}

	// 面纸钱方法
	function getMianZhiQian(mainjiV,shuliangV,mianzhiV){
		// 面纸钱
		let mianzhiqian = 0;

		if (mianzhiV == "白板纸") {
			mianzhiqian = mainjiV * 0.35 * 3.6 * (shuliangV + 200);
			// console.log(mianzhiqian);
		}else if(mianzhiV == "国产牛皮纸"){
			mianzhiqian = mainjiV * 0.35 * 4.6 * (shuliangV + 200);
			// console.log(mianzhiqian);
		}else if(mianzhiV == "进口牛卡纸"){
			mianzhiqian = mainjiV * 0.35 * 7.3 * (shuliangV + 200);
			// console.log(mianzhiqian);
		}else{
			alert("面纸选择是不是有误 再检查下")
		}
		return mianzhiqian;
	}



	// 瓦楞钱方法
	function getWaLengQian(mainjiV,shuliangV,walengV){
		// 瓦楞钱
		let walengqian = 0;

		if (walengV == "三层箱") {
			walengqian = mainjiV * 1.7 * (shuliangV + 100);
			// console.log(walengqian);
		}else if(walengV == "五层箱"){
			walengqian = mainjiV * 2.7 * (shuliangV + 100);
			// console.log(walengqian);
		}else{
			alert("瓦楞选择是不是有误 再检查下")
		}
		return walengqian;
	}


	// 印刷费方法
	function getYinShuaFei(shuliangV){
		var yinshuafei = 0;

		if (shuliangV <= 3000) {
			yinshuafei = 450;
		}else{
			var yushu = shuliangV - 3000;
			// 向上取整
			var quzheng = Math.ceil(yushu / 1000);
			yinshuafei = 450 +  quzheng * 70;
			// console.log(yinshuafei);
		}
		// console.log(yinshuafei);
		return yinshuafei;
	}


	// 配件费方法
	function getPeiJianFei(shuliangV,peijianV){
		var peijianfei = 0;
		if (peijianV == "有配件") {
			peijianfei = 100 * Math.ceil(shuliangV / 1000);
		}else if (peijianV == "无配件") {
			peijianfei = 0;
		}else{
			alert("配件选择有误 再看一下")
		}
		// console.log(peijianfei);
		return peijianfei;
	}


	// 工艺费方法
	function getGongYiFei(shuliangV,gongyiV){
		var gongyifei = 0;
		if (gongyiV == "有工艺") {
			gongyifei = 300 * Math.ceil(shuliangV / 1000);
		}else if (gongyiV == "无工艺") {
			gongyifei = 0;
		}else{
			alert("工艺选择有误 再看一下")
		}
		// console.log(gongyifei);
		return gongyifei;
	}

</script>
</html>